import { defineComponent, toRefs, ref, computed, PropType, watch, onMounted } from "vue";
import '@src/modules/trigger/components/ProcessNodeChart/style/BaseNodeSelect.scss'

/* type */
import { NodeTypeEnum } from '@src/modules/trigger/model/enum/index.ts'
/* state */
import state from '@src/modules/trigger/view/setting/util/state.js'


export default defineComponent({
    name: 'nodeSelectExec',
    props: {
        options: {
            type: Object as PropType<any>,
            default: () => {}
        },
        nodeType: {
            type: String as PropType<string>,
            default: NodeTypeEnum.START_NODE
        }
    },
    setup(props) {
        const { options, nodeType } = toRefs(props)

        // 显示节点顶部文案
        const showTopContent = computed(() => {
            return options.value.appName || ''
        })
        // 执行动作文案
        const triggerActionText = computed(() => {
            if (state.editStatus) {
                return options.value.selectObjName || '请选择'
            }
            return options.value.selectObjName || '请选择'
        })

        const showLogoType = () => {
            const appLogo = options.value.appLogo;

            if (!appLogo) {
                return ''
            }

            if (appLogo.startsWith('icon-')) {
                return 'icon';
            } else if (appLogo.startsWith('http') || appLogo.startsWith('https')) {
                return 'http';
            } else if (appLogo === '') {
                return ''
            }
        }
        const renderProcessLogo = () => {
            if (showLogoType() === 'icon') {
                return (
                    <div class={`process-select-icon iconfont ${options.value.appLogo ? options.value.appLogo : ''}`}></div>
                )
            }
            if (showLogoType() === 'http') {
                return (
                        <img src={options.value.appLogo} alt="" class="process-select-http"/>
                )
            }
            if (showLogoType() === '') {
                return (
                    <div class={'process-select-default'}>
                        {options.value.appName ? options.value.appName.slice(0, 2) : ''}
                    </div>
                )
            }
        }
        
        
        

        onMounted(() => {
        })

        return () => (
            <div class="process-select">
                <div class={`process-select-base`}>
                    {renderProcessLogo()}
                </div>
                <div class="process-select-content">
                    <div class="process-select-content__top">{showTopContent.value}</div>
                        <div class="process-select-content_bottom" >
                            <span class="process-select-content_bottom__text">执行动作：</span>
                            <div class="process-select-content_bottom__select">
                                {triggerActionText.value}
                            </div>
                        </div>
                </div>
            </div>
        )
    }
})